/*
 * @Author: xiehangyun 
 * @Date: 2025-02-22 09:27:19 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-22 09:40:07
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./brushSize.module.less";
import { Input, Slider } from "antd";
import graffitiStore from "../../graffitiStore";
import { clamp } from "lodash";

interface Iprops {
  children?: ReactNode
}

// 画笔大小
export default function BrushSize() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [brushSize, setBrushSize] = useState(graffitiStore.brushSize);

  useEffect(() => {
  }, []);

  useEffect(() => autorun(() => {
    setBrushSize(graffitiStore.brushSize);
  }, { delay: 30 }), []);

  return (
    <div
      ref={dom}
      className={styles.brushSize}
    >
      <span className={styles.lable} >宽度</span>
      &nbsp;
      <Slider
        className={styles.slider}
        min={1}
        max={100}
        value={brushSize}
        onChange={v => {
          graffitiStore.setBrushSize(v);
        }}
      />
      &nbsp;
      <Input
        size="small"
        key={brushSize}
        className={styles.input}
        defaultValue={brushSize}
        onPressEnter={e => {
          graffitiStore.setBrushSize(Number((e.target as HTMLInputElement).value));
        }}
        onBlur={e => {
          graffitiStore.setBrushSize(Number((e.target as HTMLInputElement).value));
        }}
        onWheel={e => {
          const value = clamp((brushSize - Math.sign(e.deltaY)), 1, 100);
          graffitiStore.setBrushSize(value);
        }}
      />
      &nbsp;
      <span className={styles.lable} >px</span>
      &nbsp;
    </div>
  );
}